
/**
 * Echarts地图
 */

//中国地图（第一级地图）的ID、Name、Json数据
var chinaId = 430000;
var chinaName = '湖南'
var chinaJson = null;
var CITYID;
//记录父级ID、Name
var mapStack = [];
var parentId = 430000;
var parentName = '湖南';

var  initState=true;
//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null;
$(function () {//dom加载后执行
    mapChart('mapChart');//
})



/**
 * 根据Json里的数据构造Echarts地图所需要的数据
 * @param {} mapJson
 */
function initMapData(mapJson) {
    var mapData = [];
    for (var i = 0; i < mapJson.features.length; i++) {
        mapData.push({
            name: mapJson.features[i].properties.name,
            value:Math.floor(Math.random()*3000)+200
            //id:mapJson.features[i].id
        })
        console.log(mapJson.features[i].properties.name);
    }
    return mapData;
}

/**
 * 返回上一级地图
 */
function backSuperior() {
    if (mapStack.length != 0) {//如果有上级目录则执行
        $('.title').html('湖南');
        var map = mapStack.pop();
        $.get('./asset/json/map/' + map.mapId + '.json', function (mapJson) {
            initState=true;
            registerAndsetOption(myChart, map.mapId, map.mapName, mapJson, false)

            //返回上一级后，父级的ID、Name随之改变
            parentId = map.mapId;
            parentName = map.mapName;

        })
    }


}







function mapChart(divid) {

    $.get('./asset/json/map/' + chinaId + '.json', function (mapJson) {
        chinaJson = mapJson;
        myChart = echarts.init(document.getElementById(divid));

        registerAndsetOption(myChart, chinaId, chinaName, mapJson, false)
        parentId = chinaId;
        parentName = '湖南';


        //钻取事件
        myChart.on('click', function (param) {
            $('.title').html(param.name);
            var cityId = cityMap[param.name];
            if (cityId) {//代表有下级地图
                CITYID=cityId;
                $.get('./asset/json/map/' + cityId + '.json', function (mapJson) {
                    //location.href="indexbf.html?cs="+param.name+"&cityid="+cityId;
                    registerAndsetOption(myChart, cityId, param.name, mapJson, true)
                })

            } else {
                window.fn_get_event_post(cityId,param.name);//调用方法 获取数据 进行渲染
                // console.log("111");
                // $.get('./asset/json/map/' + CITYID + '.json', function (mapJson) {
                //     location.href="indexbf.html?cs="+param.name+"&cityid="+CITYID;
                //     //registerAndsetOption(myChart, cityId, param.name, mapJson, false)
                // })
                // console.log(cityId,param.name)
                // //没有下级地图，回到一级中国地图，并将mapStack清空
                // registerAndsetOption(myChart, chinaId, chinaName, chinaJson, false)
                // mapStack = []
                // parentId = cityId;
                // parentName = param.name;
                // param.name="湖南"
                // alert(param.name);
                return false;
            }

            //刷新页面渲染数据
            // $.get("test.html", {Action:"get",Name:"lulu"}, function (data, textStatus){
            //
            // })

            // param.event.event.stopPropagation();
            // return false

        });
        //移动上去 触发事件
        myChart.on("mouseover",function(param){
        })


    })
}

/**
 *
 * @param {*} myChart
 * @param {*} id        省市县Id
 * @param {*} name      省市县名称
 * @param {*} mapJson   地图Json数据
 * @param {*} flag      是否往mapStack里添加parentId，parentName
 */
function registerAndsetOption(myChart, id, name, mapJson, flag) {
    if(initState==false && name=="湖南"){
        return;
    }else{
        initState=false;
    }
    window.fn_get_event_post(id,name);
    echarts.registerMap(name, mapJson);
    myChart.setOption({
        //左下角lengend
        tooltip : {
            // show: true,
            trigger: 'item',
            formatter: function(params) {
                if (params.data) return params.name + '：' + params.data['value']
            },
        },

        // dataRange: {
        //     show:false,
        //     x: 'left',
        //     y: 'bottom',
        //     splitList: [
        //         {start: 5, end: 5, color: 'orange'},//当值为5时，区域背景
        //         {start: 10, end: 10, color: '#F2D010'},//当值为10时，区域背景
        //         {start: 15, end: 15, color: '#ccc'},//当值为15时，区域背景
        //     ]
        // },

        toolbox: {
        feature: {
            saveAsImage: {}
        },
            dataZoom: [
                {
                    type: 'slider',    //支持鼠标滚轮缩放
                    start: 0,            //默认数据初始缩放范围为10%到90%
                    end: 100
                }
                // ,
                // {
                //     type: 'inside',    //支持单独的滑动条缩放
                //     start: 0,            //默认数据初始缩放范围为10%到90%
                //     end: 100
                // }
            ],
        },
        visualMap: {
            show:false,
            min: 200,
            max: 3000,
            left:'1%',
            bottom:'1%',
            itemWidth: 25,
            itemHeight: 100,
            text:['高','低'],
            realtime: false,
            calculable: true,
            textStyle: {
                color:'#fff',
                fontSize:'20'
            },
            inRange: {
                color: ['#18b0ff','#ffde00', '#ff6f18']
            }
        },
        series: [{
            hoverable: true,    //鼠标经过时，是否高亮显示
            type: 'map',
            map: name,
            label: {
                normal: {
                    show: true,
                    color:"#000",//城市名称颜色
                    fontSize:12//城市名称字体大小
                },
                emphasis: {
                    show: true,
                    color:"#fff",
                    fontSize:14
                }
            },
            itemStyle: {
                normal: {
                    areaColor: 'rgba(7,157,233,0.4)',//背景颜色值
                    borderColor: '#ddd',

                },
                emphasis: {
                    areaColor: '#3093d8'//指向颜色值
                }
            },

            layoutCenter: ['45%', '45%'],//距离左右，上下距离的百分比
            layoutSize:'80%',//map百分比大小

            data: initMapData(mapJson)
        }]
    });

    if (flag) {//往mapStack里添加parentId，parentName,返回上一级使用
        mapStack.push({
            mapId: parentId,
            mapName: parentName
        });


        parentId = id;
        parentName = name;
    }
    console.log(mapStack);
}